<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Basic chat-bubble Example</title>

	<!-- for mobile screens -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- stylesheets are conveniently separated into components -->
	<link rel="stylesheet" media="all" href="../component/styles/setup.css">
	<link rel="stylesheet" media="all" href="../component/styles/says.css">
	<link rel="stylesheet" media="all" href="../component/styles/reply.css">
	<link rel="stylesheet" media="all" href="../component/styles/typing.css">
	<link rel="stylesheet" media="all" href="../component/styles/input.css">
	<style>
	body {
		background: #dcdde0;
	}
	.bubble-container {
		height: 100vh;
	}
	</style>
</head>
<body>

<!-- container element for chat window -->
<div id="chat"></div>

<!-- import the JavaScript file -->
<script src="../component/Bubbles.js"></script>
<script>
// initialize by constructing a named function...
var chatWindow = new Bubbles(
  document.getElementById("chat"), // ...passing HTML container element...
  "chatWindow" // ...and name of the function as a parameter
)

// `.talk()` will get your bot to begin the conversation
chatWindow.talk(
  // pass your JSON/JavaScript object to `.talk()` function where
  // you define how the conversation between the bot and user will go
  {
    // "ice" (as in "breaking the ice") is a required conversation object
    // that maps the first thing the bot will say to the user
    ice: {
      // "says" defines an array of sequential bubbles
      // that the bot will produce
      says: ["Hey!", "Can I have a banana?"],

      // "reply" is an array of possible options the user can pick from
      // as a reply
      reply: [
        {
          question: "🍌", // label for the reply option
          answer: "banana" // key for the next conversation object
        }
      ]
    }, // end required "ice" conversation object

    // another conversation object that can be queued from within
    // any other conversation object, including itself
    banana: {
      says: ["Thank you!", "Can I have another banana?"],
      reply: [
        {
          question: "🍌🍌",
          answer: "banana"
        }
      ]
    } // end conversation object
  } // end conversation object
)
</script>
</body>
